<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="我的信息">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="display: flex; flex-wrap: wrap"
        >
          <el-form-item label="*活动名称:" prop="username">
            <el-input
              readonly
              v-model="ruleForm.username"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="*用户名称:" prop="nickname">
            <el-input
              readonly
              v-model="ruleForm.nickname"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="*性别:" prop="sex">
            <el-input readonly v-model="ruleForm.sex" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="*类型:" prop="type">
            <el-input readonly v-model="ruleForm.type" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" prop="phone">
            <el-input
              readonly
              v-model="ruleForm.phone"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" prop="email">
            <el-input
              readonly
              v-model="ruleForm.email"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="生效时间:" prop="createtime">
            <el-date-picker
              readonly
              v-model="ruleForm.createtime"
              type="date"
              placeholder="选择日期"
              size="medium"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="详细住址:" prop="homeaddress">
            <el-input
              readonly
              v-model="ruleForm.homeaddress"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="我的车位:" prop="parkname">
            <el-input
              readonly
              v-model="ruleForm.parkname"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="计费状态:" prop="coststatus">
            <el-input
              readonly
              v-model="ruleForm.coststatus"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item label="我的描述:" prop="note">
            <el-input
              readonly
              type="textarea"
              v-model="ruleForm.note"
              size="medium"
              style="width: 1300px; height: 100px"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="box">
      <h1>头像信息/更换</h1>
      <div class="avata" style="display: flex">
        <img :src="img" alt="" style="width: 180px; height: 180px" />
        <el-upload
          class="avatar-uploader"
          :action="action"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
      ruleForm: {},
      imageUrl: "",
      action:
        "http://community.byesame.com/users/updateIcon?token=" +
        sessionStorage.getItem("token"),
      img: "",
      imgHeaders: "http://community.byesame.com/file/",
    };
  },
  created() {
    this.getdata();
    this.jiek();
  },
  methods: {
    // 渲染
    getdata() {
      this.$axios
        .post("users/getMyId", {
          id: "",
          token: sessionStorage.getItem("token"),
        })
        .then((res) => {
          console.log(res);
          this.ruleForm = res.data[0];
          if (this.ruleForm.type == 1) {
            this.ruleForm.type = "管理员";
          } else {
            this.ruleForm.type = "普通用户";
          }
          if (this.ruleForm.coststatus == 1) {
            this.ruleForm.coststatus = "已缴费";
          } else if (this.ruleForm.coststatus != 1) {
            this.ruleForm.coststatus = "未缴费";
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 接口
    jiek() {
      this.$axios({
        url: "/users/getUserByToken",
        method: "GET",
        params: {
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        console.log(res);
        this.img = this.imgHeaders + res.data.head;
        console.log(this.img);
      });
    },
    // 头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$axios({
        url: "/users/updateIcon",
        method: "POST",
        data: {
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        this.$message.success("上传成功,请退出登录查看");
        console.log(res);
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      // const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      // if (!isLt2M) {
      // this.$message.error("上传头像图片大小不能超过 2MB!");
      // }
      return isJPG;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 600px;
}
.el-form-item {
  margin-top: 25px;
}
//
.avata {
  border: 1px solid;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>